;(function($){
	var defaults={
   	  		 "big_img":"#big-pic img",
   	  		 "small_pic":"#small-pic",
           "small_img":"#small-pic img",
   	  		 "li_pic":"#ul-pic li",
   	  		 "theSpan":"#span",
           "big_pic":"#big-pic",
           "container":"#container"
   	  	};
   var opts={};
   var big_img,//大图div中的图片
       small_pic,//小图div
       li_pic,   //选图列表
       theSpan,  //随鼠标移动的镜片
       small_img,
       big_pic,
       container;

   $.fn.extend({
   	  "magnifier":function(options){
      opts=$.extend(defaults,options||{});
      big_img=$(defaults.big_img);
      small_pic=$(defaults.small_pic);
      li_pic=$(defaults.li_pic);
      theSpan=$(defaults.theSpan);
      small_img=$(defaults.small_img);
      container=$(defaults.container);
      big_pic=$(defaults.big_pic);
      listener();
   	  return this;
   	  },
   });

   function moveSpan(event){
        event=event||window.event;
        var left=event.clientX-container.offset().left-theSpan.width()/2;
        var top=event.clientY-container.offset().top-theSpan.height()/2;
        if(left<0){
            left=0;
        }else if(left>small_pic.width()-theSpan.width()){
          left=small_pic.width()-theSpan.width();
        }
        if(top<0){
           top=0;
        }else if(top>small_pic.height()-theSpan.height()){
          top=small_pic.height()-theSpan.height();
        }
        theSpan.css("display","block");
        big_pic.css("display","block");
        theSpan.css("left",left);
        theSpan.css("top",top);
        big_img.css("left",-(small_pic.width()/theSpan.width()*left));
        big_img.css("top",-(small_pic.height()/theSpan.height()*top));
        
   }
   function moveOut(){
       theSpan.css("display","none");
       big_pic.css("display","none");
   }
   function chooseImg(that){
        var self=$(that);           
        li_pic.removeClass("choosed"); 
        self.addClass("choosed");
        var li_a=self.find("a");
        var smallImg_path=li_a.attr("smallPic");
        var bigImg_path=li_a.attr("bigPic");
        big_img.attr("src",bigImg_path);
        small_img.attr("src",smallImg_path);
       
   }

   function listener(){
   	   li_pic.on("mouseover",function(event){  
           chooseImg(this);
   	   });
   	   small_pic.on("mousemove",function(event){
   	   	  moveSpan(event);
   	   });
        small_pic.on("mouseout",function(){
          moveOut();
       });
   }
})(jQuery);